<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">信息统计</el-breadcrumb-item>
            <el-breadcrumb-item>巡检记录统计</el-breadcrumb-item>
        </el-breadcrumb>

        <!--卡片区-->
        <el-card>
            <!--搜索区-->
            <el-form>
                <el-form ref="form">
                    <el-row :gutter="10">
                        <div>
                            <el-col :span="2" class="task">任务编号:</el-col>
                            <el-col :span="4">
                                <el-input></el-input>
                            </el-col>
                        </div>
                        <div>
                            <el-col :span="2" class="task">线路编号:</el-col>
                            <el-col :span="4">
                                <el-input></el-input>
                            </el-col>
                        </div>
                        <div>
                            <el-col :span="2" class="task">有无故障:</el-col>
                            <el-col :span="4">
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </div>
                    </el-row>

                    <el-row :gutter="10">
                    </el-row>

                    <el-row :gutter="10" class="time_row">
                        <div>
                            <el-col :span="2" class="task">消缺时间</el-col>
                        </div>
                        <div>
                            <el-form-item>
                                <el-col :span="4">
                                    <el-date-picker type="date" placeholder="选择日期"
                                                    style="width: 100%;"></el-date-picker>
                                </el-col>
                                <el-col class="line" :span="1">to</el-col>
                                <el-col :span="4">
                                    <el-date-picker type="date" placeholder="选择日期"
                                                    style="width: 100%;"></el-date-picker>
                                </el-col>
                                <el-col :span="4" class="button1">
                                    <el-button type="primary" size="medium" icon="el-icon-search">查询</el-button>
                                </el-col>

                                <el-col :span="4" class="button2">
                                    <el-button type="primary" size="medium" icon="el-icon-search">打印</el-button>
                                </el-col>

                                <el-col :span="4" class="button3">
                                    <el-button type="primary" size="medium" icon="el-icon-search">导出EXCEL</el-button>
                                </el-col>
                            </el-form-item>
                        </div>
                    </el-row>
                </el-form>
            </el-form>

            <!--主体区-->
            <el-table :data="statistics">
                <el-table-column label="任务编号" prop="task_number"></el-table-column>
                <el-table-column label="任务名称" prop="task_name"></el-table-column>
                <el-table-column label="线路编号(起始杆号-终止杆号)" prop="circuit_number" width="220px"></el-table-column>
                <el-table-column label="杆塔编号" prop="tower_number"></el-table-column>
                <el-table-column label="有无故障" prop="malfunction"></el-table-column>
                <el-table-column label="缺陷级别" prop="flaw_rank"></el-table-column>
                <el-table-column label="缺陷类型" prop="flaw_type"></el-table-column>
                <el-table-column label="消缺时间" prop="eliminate_time" width="100px"></el-table-column>
                <el-table-column label="发现时间" prop="find_time" width="100px"></el-table-column>
                <el-table-column label="缺陷描述" prop="tower_describe"></el-table-column>
            </el-table>


            <!--分页区-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[1, 2, 5, 10]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"></el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                /*获取用户列表的参数对象, 分页*/
                queryInfo: {
                    query: '',
                    // 当前的页数
                    pagenum: 1,
                    // 当前每页显示多少条数据
                    pagesize: 2
                },
                total: 0,

                statistics: [],
                options: [{
                    value: '有',
                    lable: '1'
                },
                    {
                        value: '无',
                        lable: '2'
                    }],
                value: ''
            }
        },
        created() {
            this.getList()
        },
        methods:{
            getList() {
                this.axios.get('statistics.json').then((res) => {
                    this.statistics = res.data.result
                    this.total = res.data.total
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .task {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .el-row {
        margin-top: 10px;
    }

    .button1 {
        position: absolute;
        left: 720px;
    }

    .button2 {
        position: absolute;
        left: 825px;
    }

    .button3 {
        position: absolute;
        left: 930px;
    }
</style>
